<template>
  <section class='f-zfb'>
    <van-form @submit="onSubmit" ref="formRef" input-align="right" error-message-align="right">
      <van-cell-group>
        <van-field v-model="formData.billPhone" name="billPhone" label="手机号" type="number" placeholder="请输入手机号码"
          :rules="[{ required: true, message: '请输入手机号码' }]" />
        <van-field v-model="formData.billNo" name="billNo" label="银行卡" type="number" placeholder="请输入银行卡账号"
          :rules="[{ required: true, message: '请输入银行卡账号' }]" />
      </van-cell-group>

      <div style="padding:21px 40px 0 40px;margin-top:67px">
        <van-button round block type="primary" native-type="submit">确定</van-button>
      </div>
    </van-form>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../api'
import { successDeal } from '@/utils/utils';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const formRef = ref()

    const state = reactive({
      formData: {
        billPhone: '',
        billNo: '',
      }
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '绑定银行卡',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });
    })

    const onSubmit = () => {
      api.bankBind(state.formData).then(res => {
        successDeal('银行卡绑定成功！')
        setTimeout(() => {
          router.go(-1)
        }, 500)
      })
    }

    return {
      ...toRefs(state),
      formRef,
      onSubmit
    }
  }
}
</script>

<style lang='scss' scoped>
.f-zfb {
}
</style>